/* eslint-disable @typescript-eslint/no-explicit-any */
import { h } from 'preact';
import { Namespace } from '../../utils';
import { IChatToolbarItem } from '../../interface';
import { AiChatController } from '../../controller';
import {
  CopySvg,
  FillSvg,
  DeleteSvg,
  RefreshSvg,
  NewDialogue,
} from '../../icons';
import './chat-toolbar.scss';

export interface ChatToolbarProps {
  /**
   * 单实例聊天总控
   *
   * @type {AiChatController}
   * @memberof ChatToolbarProps
   */
  controller: AiChatController;

  /**
   * 用户自定义工具项集合
   *
   * @type {IChatToolbarItem}
   * @memberof ChatToolbarProps
   */
  items?: IChatToolbarItem[];

  /**
   * 业务数据
   *
   * @type {*}
   * @memberof ChatToolbarProps
   */
  data: any;

  /**
   * 工具栏类型
   *
   * @type {('content' | 'footer')}
   * @memberof ChatToolbarProps
   */
  type: 'content' | 'footer';

  /**
   * 类名
   *
   * @type {string}
   * @memberof ChatToolbarProps
   */
  className?: string;
}

const ns = new Namespace('chat-toolbar');

export const ChatToolbar = (props: ChatToolbarProps) => {
  const { controller, items = [], data, type, className } = props;
  let toolbarItems: IChatToolbarItem[] = [];
  let style: 'default' | 'circle' = 'default';
  /**
   * 底部默认工具栏
   *
   */
  const FooterDefaultItems: IChatToolbarItem[] = [
    {
      label: '新建对话',
      title: '新建对话',
      icon: <NewDialogue />,
      onClick: () => {
        console.log('TODO 新建对话');
      },
    },
  ];

  /**
   * 回答默认工具栏
   *
   */
  const AnswerDefaultItems: IChatToolbarItem[] = [
    {
      label: '回填',
      title: '回填',
      icon: <FillSvg />,
      onClick: () => {
        controller.backfill(data);
      },
    },
    {
      label: '刷新',
      title: '刷新',
      icon: <RefreshSvg />,
      onClick: () => {
        controller.refreshMessage(data);
      },
    },
    {
      label: '删除',
      title: '删除',
      icon: <DeleteSvg />,
      onClick: () => {
        controller.deleteMessage(data);
      },
    },
    {
      label: '复制',
      title: '复制',
      icon: <CopySvg />,
      onClick: () => {
        controller.copyMessage(data);
      },
    },
  ];

  /**
   * 提问默认工具栏
   */
  const QuestionDefaultItems: IChatToolbarItem[] = [
    {
      label: '刷新',
      title: '刷新',
      icon: <RefreshSvg />,
      onClick: () => {
        controller.refreshMessage(data, true);
      },
    },
  ];

  if (type === 'content') {
    style = 'circle';
    switch (data.type) {
      case 'DEFAULT':
        if (data.role === 'ASSISTANT') {
          toolbarItems = [...AnswerDefaultItems, ...items];
        } else {
          toolbarItems = [...QuestionDefaultItems];
        }
        break;
      case 'ERROR':
        toolbarItems = [...AnswerDefaultItems, ...items];
        break;
      default:
        break;
    }
  } else {
    toolbarItems = [...FooterDefaultItems, ...items];
  }

  const hidden = (item: IChatToolbarItem): boolean => {
    if (typeof item.hidden === 'function') return item.hidden(data);
    return item.hidden === true;
  };

  const disabled = (item: IChatToolbarItem): boolean => {
    if (typeof item.disabled === 'function') return item.disabled(data);
    return item.disabled === true;
  };

  const handleItemClick = (e: MouseEvent, item: IChatToolbarItem): void => {
    if (disabled(item)) return;
    item.onClick?.(e, controller.context, controller.params, data);
  };

  return (
    <div className={`${ns.b()} ${ns.e(style)} ${className || ''}`}>
      {toolbarItems.map((item, index) => {
        if (hidden(item)) return;
        return (
          <div
            key={index}
            className={`${ns.e('item')} ${ns.is(
              'disabled',
              disabled(item),
            )} ${ns.is('loading', data.state === 20)} ${className || ''}`}
            title={item.title}
            onClick={e => handleItemClick(e, item)}
          >
            <div className={`${ns.em('item', 'icon')}`}>
              {typeof item.icon === 'function' ? item.icon(h) : item.icon}
            </div>
            <div className={`${ns.em('item', 'label')}`}>
              {typeof item.label === 'function' ? item.label(h) : item.label}
            </div>
          </div>
        );
      })}
    </div>
  );
};
